<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="back"
        mode=""
      />
      意见反馈
    </view>
    <view class="" style="padding-top: 108rpx">
      <view class="container">
        <view class="title">请描述您的具体问题</view>
        <view class="area">
          <textarea
            value=""
            placeholder="在此输入您遇到的问题"
            v-model="content"
            cursor="5"
            placeholder-class="juti"
            class="wenti"
            @input="onCeIntroductionInput"
          />
          <view class="textSize">{{ wordsnumber }}/500</view>
        </view>
        <view class="title"> 图片补充(提供截图更便于程序员小哥哥解决) </view>
        <view style="" @click="chooseAlbumpic">
          <view class="tianjia" v-if="!pic">
            <image class="img" src="../../../static/xiangji.png" mode="" />
            <text>上传图片</text>
          </view>
          <image :src="pic" mode="aspectFit" class="pic" v-if="pic"></image>
        </view>
        <view class="title">您的联系方式</view>
        <view class="">
          <input
            type="number"
            v-model="phone"
            value=""
            class="qq"
            placeholder="QQ/微信/手机号"
            placeholder-class="weixin"
          />
        </view>
        <button type="default" class="submit" @click="submit">立即提交</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pic: "",
      wordsnumber: 0,
      token: "",
      content: "",
      phone: "",
      images: "",
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
  },
  methods: {
    back() {
      uni.switchTab({
        url: "../users",
      });
    },
    // 添加图片
    chooseAlbumpic() {
      let that = this;
      uni.chooseImage({
        count: 1,
        sourceType: ["album"],
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          that.pic = tempFilePaths[0];
          uni.uploadFile({
            url: "https://www.123qifu.com/api/common/upload", //仅为示例，非真实的接口地址
            header: {
              token: that.token,
            },
            filePath: that.pic,
            name: "file",
            formData: {},
            success: (uploadFileRes) => {
              const list = JSON.parse(uploadFileRes.data);
              that.images = list.data.url;
            },
          });
        },
      });
    },
    onCeIntroductionInput(event) {
      this.wordsnumber = event.detail.cursor;
    },
    // 点击提交
    async submit() {
      let that = this;
      const res = await that.$myRequest({
        url: "index/addFeedback",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {
          content: that.content,
          contact: that.phone,
          images: that.images,
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: "success",
        });
        setTimeout(() => {
          uni.switchTab({
            url: "../users",
          });
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  border-bottom: 20rpx solid #eee;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
  .reco {
    position: absolute;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    right: 30rpx;
  }
}
.container {
  padding: 30rpx;
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #373737;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    position: relative;
    padding-left: 15rpx;
  }
  .title::before {
    position: absolute;
    content: "";
    width: 6rpx;
    height: 30rpx;
    background: #c52b2e;
    border-radius: 3rpx;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .area {
    position: relative;
    margin-bottom: 50rpx;
    .wenti {
      width: 100%;
      height: 340rpx;
      background: #f4f4f4;
      border-radius: 10rpx;
      box-sizing: border-box;
      padding: 20rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #333;
    }
    .textSize {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
    }
  }
  .tianjia {
    width: 180rpx;
    height: 180rpx;
    background: #f4f4f4;
    border-radius: 4rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50rpx;
    .img {
      display: block;
      width: 44rpx;
      height: 36rpx;
      margin: 0 auto;
    }
    text {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 10rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
    }
  }
  .pic {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 50rpx;
  }
  .qq {
    width: 100%;
    height: 70rpx;
    background: #f4f4f4;
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #333;
    box-sizing: border-box;
    padding: 0 21rpx;
  }
  .submit {
    width: 350rpx;
    height: 74rpx;
    background: #c52b2e;
    border-radius: 37rpx;
    text-align: center;
    line-height: 74rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 80rpx auto;
  }
}
</style>
